import { Button, Switch, Tooltip } from 'antd';
import MyIcon from '@/components/MyIcon';
import pageStyles from '@/common/pageLayout.less';
import { EditOutlined } from '@ant-design/icons';
import { IResColumnsOpt } from '../type';

const Operation = (curRes: Record<string, any>, clickFnc: IResColumnsOpt, record?: Record<string, any>) => {
  let operationArray: any = [];

  const Edit = record?.id && record?.isOpen == 1 && curRes['/resourceController/edit'] && (
    <Button
      className="manageBtntTxtStyle"
      onClick={() => {
        clickFnc?.onEditAdd(record);
      }}
      type={'link'}
      size={'small'}
      icon={<EditOutlined />}
      key={record?.id + 'EditOutlined'}
    >
      编辑
    </Button>
  );

  operationArray = [Edit];
  return operationArray;
};

const getResouColumns: any = (curRes: Record<string, any>, clickFnc: IResColumnsOpt, seachValue: string) => {
  return [
    {
      title: '资源名称',
      dataIndex: 'name',
      key: 'name',
      width: 240,
      fixed: 'left',
      ellipsis: {
        showTitle: true,
      },
      visible: true,
      unDrag: true,
      showSorterTooltip: false,
      render: (text: string, record: Record<string, any>) => {
        const index = text ? text.indexOf(seachValue) : -1;
        const beforeStr = text ? text.substr(0, index) : '';
        const afterStr = text ? text.substr(index + seachValue.length) : '';
        const title =
          index > -1 && seachValue != '' ? (
            <span>
              {beforeStr}
              <span style={{ color: '#f50' }}>{seachValue}</span>
              {afterStr}
            </span>
          ) : (
            <span>{text}</span>
          );

        return (
          <Tooltip title={title} placement="top">
            <span className={pageStyles['over-flow-hidden']} id={record?.id}>
              <MyIcon type={record?.icon} />
              &nbsp;
              {title ?? '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '资源类型',
      dataIndex: 'resourceType',
      key: 'resourceType',
      width: 120,
      visible: true,
      showSorterTooltip: false,
      render: (text: string) => {
        let newText = '';
        let textColor = '';
        if (text == '0') {
          newText = '系统目录';
          textColor = '#096dd9';
        } else if (text == '1') {
          newText = '业务菜单';
          textColor = '#08979c';
        } else if (text == '2') {
          newText = '数据范围';
          textColor = '#59d6a5';
        } else if (text == '3') {
          newText = '功能操作';
          textColor = '#fcc128';
        }

        return (
          <div className={pageStyles['over-flow-hidden']} style={{ color: textColor }}>
            {newText || '--'}
          </div>
        );
      },
    },
    {
      title: '资源类别',
      dataIndex: 'resourceStyle',
      key: 'resourceStyle',
      width: 120,
      visible: true,
      showSorterTooltip: false,
      render: (text: string) => {
        let newText: string = '';
        let textColor: string = '';
        if (text == '0') {
          newText = '全部';
          textColor = '#faad14';
        } else if (text == '1') {
          newText = '电脑端';
          textColor = '#eb2f96';
        } else if (text == '2') {
          newText = '手机端';
          textColor = '#ad69f5';
        }
        return (
          <div className={pageStyles['over-flow-hidden']} style={{ color: textColor }}>
            {newText || '--'}
          </div>
        );
      },
    },
    {
      title: '资源路径',
      dataIndex: 'url',
      key: 'url',
      width: 280,
      visible: true,
      showSorterTooltip: false,
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '方法类型',
      dataIndex: 'method',
      key: 'method',
      width: 120,
      visible: true,
      showSorterTooltip: false,
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text ?? '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '服务路由',
      dataIndex: 'matchRoute',
      key: 'matchRoute',
      width: 120,
      visible: true,
      showSorterTooltip: false,
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text ?? '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '系统类别',
      dataIndex: 'systemType',
      key: 'systemType',
      width: 120,
      visible: true,
      showSorterTooltip: false,
      render: (text: string) => {
        let newText: string = '';
        let textColor: string = '';
        if (text == '0') {
          newText = '公共资源';
          textColor = '#faad14';
        } else if (text == '1') {
          newText = '采购系统';
          textColor = '#eb2f96';
        } else if (text == '2') {
          newText = '合同系统';
          textColor = '#ad69f5';
        } else if (text == '3') {
          newText = '资产系统';
          textColor = '#ad69f5';
        } else if (text == '4') {
          newText = '专家库';
          textColor = '#16ff77';
        }
        return <div className={pageStyles['over-flow-hidden']}>{newText ?? '--'}</div>;
      },
    },
    {
      title: '国际化',
      dataIndex: 'i18nRoute',
      key: 'i18nRoute',
      width: 110,
      visible: true,
      showSorterTooltip: false,
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '业务模块',
      dataIndex: 'serviceTypeName',
      key: 'serviceTypeName',
      width: 120,
      visible: true,
      showSorterTooltip: false,
      render: (text: string) => {
        let serviceTypeName = text ? text.split('||')[0] : '';
        let fontColor = '';
        if (text && text.split('||').length > 1) {
          fontColor = text.split('||')[1];
        }
        return (
          <Tooltip title={serviceTypeName}>
            <div className={pageStyles['over-flow-hidden']} style={{ color: fontColor }}>
              {serviceTypeName || '--'}
            </div>
          </Tooltip>
        );
      },
    },
    {
      title: '排序',
      dataIndex: 'seq',
      key: 'seq',
      width: 90,
      visible: true,
      showSorterTooltip: false,
      sorter: (a: any, b: any) => {
        if (a.seq < b.seq) {
          return -1;
        } else {
          return 1;
        }
      },
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '0'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '状态',
      dataIndex: 'isOpen',
      key: 'isOpen',
      width: 100,
      visible: true,
      showSorterTooltip: false,
      // sorter: (a: any, b: any) => {
      //   if (a.isOpen < b.isOpen) {
      //     return -1;
      //   } else {
      //     return 1;
      //   }
      // },
      render: (text: string, record: Record<string, any>) => {
        return (
          <>
            <Switch
              checkedChildren="启用"
              unCheckedChildren="禁用"
              checked={text == '1' ? true : false}
              onChange={(checked: boolean) => {
                clickFnc?.onChangeIsOpen(checked, record);
              }}
              disabled={!curRes['/resourceController/modifyState']}
            />
          </>
        );
      },
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      width: 200,
      visible: true,
      showSorterTooltip: false,
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      width: 90,
      key: 'option',
      fixed: 'right',
      visible: true,
      unDrag: true,
      showSorterTooltip: false,
      render: (_text: string, record: Record<string, any>) => {
        return (
          <div
            style={{
              display: 'flex',
            }}
          >
            {Operation(curRes, clickFnc, record)}
          </div>
        );
      },
    },
  ];
};
export { getResouColumns };
